<template>
	<view class="content" >
		
			<u-navbar :is-back="true" :border-bottom="false">
				<view style="height: 10px;"></view>
				<view  class="slot-wrap disfr-lr p15 f32" style="width: 100%;">
					<view class="slot-wrap-left"></view>
					<view class="slot-wrap-center mt10">群详情</view>
					<view class="slot-wrap-right pr">
						<view @click="goPage" :data-uri="'/pages/group-topup/group-topup?id='+result.id" style="position: relative;top:-0rpx;right:5px;">
							<view class="custom-min-button" style="border-radius: 4px;">推荐该群</view>
						</view>
					</view>
				</view>
			</u-navbar>

			<view v-if="show_main" class="main" >
				
				<view class="disf bgf" style="text-align: center;padding:50rpx 30rpx 10rpx 30rpx">
					<view v-for="(item,index) in result.MemberListTop" 
					:key="index" @click="userHome" :data-id="item.id" :data-is_manage="result.is_manage"
					style="width: 25%;text-align: center;">
						<view><image :src="item.head_pic" style="width: 120rpx;height: 120rpx;border-radius: 6px;"></image></view>
						<view class="col999 f24 ml10 toell" style="width: 160rpx;text-align: center;">{{item.nickname}}</view>
					</view>
					<view @click="goPage" :data-uri="'/pages/add-group-user/add-group-user?group_id='+result.tencent_group_id" style="width: 25%;">
						<view><image src="/static/image/add.png" style="width: 120rpx;height: 120rpx;"></image></view>
					</view>
				</view>
				
				<!--更多列表-->
				<view :class="'MemberListMoer '+(showUserLists ? 'show' : 'hide')">
					<view v-for="(item,index) in result.MemberListMoer" :key="index" >
						<view class="disf bgf" style="text-align: center;padding:20rpx 30rpx 20rpx 30rpx">
							<view v-for="(item2,index2) in item" :key="item2.id" @click="userHome" :data-id="item2.id" style="width: 25%;text-align: center;">
								<view><image :src="item2.head_pic" style="width: 120rpx;height: 120rpx;border-radius: 6px;"></image></view>
								<view class="col999 f24 ml10 toell" style="width: 160rpx;text-align: center;">{{item2.nickname}}</view>
							</view>
						</view>
					</view>
				</view>
				
				<view v-if="result.MemberListMoer.length > 0" class="bgf pb20" style="text-align: center;">
					<view @click="showMoeruser" style="display: inline;">
						<u-icon v-if="showUserLists" name="DoubleArrowTop" custom-prefix="qxl-icon" color="#999999" size="34"></u-icon>
						<u-icon v-else name="a-iconshuangxiangxiajiantou" custom-prefix="qxl-icon" color="#999999" size="44"></u-icon>
					</view>
				</view>
				
				<view class="bgf p30 f32 disfr-lr bto">
					<view class="pt10"><text>群分类</text></view>
					<view>{{result.cate_name}}</view>
				</view>
				
				<!--<view class="bgf f32 disfr-lr bto" style="padding: 10rpx 30rpx;">
					<view class="pt10">
						<image :src="result.face_url" style="width: 70rpx;height: 70rpx;border-radius: 6px;"></image>
					</view>
					<view @click="upload" class="pr" style="top:30rpx">
						封面图<u-icon v-if="isoWner" name="arrow-right" color="#999999" size="28"></u-icon>
					</view>
				</view>-->
				
				<view class="bgf p30 f32 disfr-lr bto">
					<view class="pt10"><text>群名称</text></view>
					<view class="disf" @click="showUpdate" :data-value="result.name" data-field="name">
						
						<view class="pr" style="top:5rpx;">{{result.name}}</view>
						<u-icon v-if="isoWner" name="arrow-right" color="#999999" size="28"></u-icon>
					 </view>
				</view>
				
				<view class="bgf p30 f32 disfr-lr bto">
					<view class="pt10"><text>群简介</text></view>
					<view class="disf" @click="showUpdate" :data-value="result.introduction" data-field="introduction">
						<view class="pr" style="top:5rpx;">{{result.introduction ? result.introduction : '群主很懒什么都没有留下'}}</view>
					    <u-icon v-if="isoWner" name="arrow-right" color="#999999" size="28"></u-icon>
					 </view>
				</view>
				
				<view class="bgf p30 f32 disfr-lr bto">
					<view class="pt10"><text>推荐值</text></view>
					<view @click="goPage" :data-uri="'/pages/group-topup/group-topup?id='+result.id">
						<text>{{result.coin_orders}}</text>
						<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
					</view>
				</view>
				
				<view v-if="isoWner" class="bgf p30 f32 disfr-lr bto">
					<view class="pt10"><text>全员禁言</text></view>
					<view>
						<radio-group @change="setRadio" data-name="mute_all_member">
							<label>
								<radio value="On" :checked="result.mute_all_member == 'On'" style="transform:scale(0.7)" color="#2979ff"/>
								<text class="pr" style="left:-10rpx">是</text>
							</label>
							<label>
								<radio value="Off" :checked="result.mute_all_member == 'Off'" style="transform:scale(0.7);position: relative;right: -10rpx;" color="#2979ff"/>
								<text>否</text>
							</label>
						</radio-group>
					 </view>
				</view>
				<view v-if="isoWner" class="bgf p30 f32 disfr-lr bto">
					<view class="pt10"><text>群员可私聊</text></view>
					<view>
						<radio-group @change="setRadio" data-name="is_private_chat">
							<label>
								<radio value="1" :checked="result.is_private_chat == 1" style="transform:scale(0.7)" color="#2979ff"/>
								<text class="pr" style="left:-10rpx">是</text>
							</label>
							<label>
								<radio value="0" :checked="result.is_private_chat == 0" style="transform:scale(0.7);position: relative;right: -10rpx;" color="#2979ff"/>
								<text>否</text>
							</label>
						</radio-group>
					 </view>
				</view>
				
				<view class="mt70" style="text-align: center;">
					
					<view v-if="isoWner" class="custom-min-button f30" @click="dismissGroup"
					style="border-radius: 4px;width: 400rpx;height: 70rpx;line-height: 70rpx;">解散本群</view>
					<view v-else class="custom-min-button f30" @click="quitGroup"
					style="border-radius: 4px;width: 400rpx;height: 70rpx;line-height: 70rpx;">退出群聊</view>
					
					<view v-if="!isoWner" class="f32 mt50" style="color:#999">
						<text @click="report" class="underline">举报群聊</text>
					</view>
				</view>
				<view style="height: 100rpx;"></view>
			</view>
			
			<!--修改弹层-->
			<u-popup v-model="showUpdatePop" mode="bottom" border-radius="30" height="380px" :closeable="true">
				<view style="margin-top: 10px;" class="p20">
					<view>修改</view>
					<form @submit="sendUpdateForm">
						<view class="form-list mt60 pr">
							<input type="text" :name="updateField" :value="updateValue" placeholder="'输入内容" placeholder-style="color: #8f8f8f;" />
						</view>
						
						<view style="height: 150rpx;"></view>
						<view class="form-list">
							<button form-type="submit" class="my_button">提交</button>
						</view>
					</form>
				</view>
			</u-popup>
		
		<loading :loading="not_load"/><!--加载状态-->
	</view>
</template>

<script setup>
import { onLoad, onShow, onHide, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
import { ref } from 'vue';	
const show_main=ref(true);
const page_load=ref(false);
const not_load=ref(false);
const result=ref({});
const showUserLists=ref(false);
const showUpdatePop=ref(false);
const updateValue=ref('');
const updateField=ref('');
const isoWner=ref(false);
const tencent_group_id=ref('');
//退出群聊
const quitGroup=async()=>{
	let groupId=result.value.tencent_group_id;
	uni.$utils.showModal('确认退出该群聊？',1,async()=>{
		let ret =await uni.TIM.quitGroup(groupId);
		if(ret.code == 0 && ret.data.groupID){
			uni.$utils.showToast('退出群聊成功',0,()=>{
				if(result.value.is_manage == 1) {
					let userId=uni.$vuex.state.globalData.user.user_id;
					uni.$post('/appapi-config-entergroupnum2',{},{tencent_group_id:ret.data.groupID,user_id:userId});
				}
				uni.TIM.getConversationList();
				uni.$utils.goPage('/pages/message/message',2); 
			});
			return;
		}
		uni.$utils.showToast('退出群聊失败');
	});
};
//解散群
const dismissGroup=async()=>{
	
	let groupId=result.value.id;
	uni.$utils.showModal('确认解散该群聊？',1,async()=>{
		not_load.value=false;
		let ret=await uni.$get('/appapi-group-delete',{ids:groupId});
		not_load.value=true;
		if(ret.error_code != 0){
			uni.$utils.showToast(ret.info);
			return;
		}
		uni.$utils.showToast('解散群成功',0,()=>{
			uni.TIM.getConversationList();
			uni.$utils.goPage('/pages/message/message',2); 
		});
	});
	
};
//去用户个人主页
const userHome=(e)=>{
	let to=e.currentTarget.dataset.id;
	let is_manage=e.currentTarget.dataset.is_manage;
	let tencent_group_id='';
	if(isoWner.value) tencent_group_id=result.value.tencent_group_id; //是群主才传群ID
	let uri='/pages/user-home/user-home?privateChat='+result.value.is_private_chat+'&user_id='+to+'&tencent_group_id='+tencent_group_id+'&is_manage='+is_manage;
	//console.log(uri);
	uni.$utils.goPage(uri);
};
//举报群
const report=()=>{
	let uri="/pages/member-report/member-report?id="+result.value.id+'&type=1';
	let profile=encodeURIComponent(result.value.face_url);
	let name=encodeURIComponent(result.value.name);
	uri+='&profile='+profile+'&name='+name;
	uni.$utils.goPage(uri);
};
const showMoeruser=()=>{
	if(showUserLists.value) showUserLists.value=false;
	else showUserLists.value=true;
}
//弹出修改框
const showUpdate=(e)=>{
	if(!isoWner.value) return;
	let value=e.currentTarget.dataset.value;
	updateValue.value=value;
	let field=e.currentTarget.dataset.field;
	updateField.value=field;
	showUpdatePop.value=true;
};
//修改提交
const sendUpdateForm=async(e)=>{
	if(!isoWner.value) return;
	let form=e.detail.value;
	if(!form[updateField.value]){
		uni.$utils.showToast('修改内容必填');
		return;
	}
	submit(updateField.value,form[updateField.value],()=>{
		result.value[updateField.value]=form[updateField.value];
	});
};

//修改单选项
const setRadio=(e)=>{
	if(!isoWner.value) return;
	let name=e.currentTarget.dataset.name;
	let value=e.detail.value;
	submit(name,value,()=>{
		result.value[name]=value;
	});
};

//页面加载时
onLoad(async (options)=>{
	tencent_group_id.value=options.group_id;
   
});
//页面显示时执行
onShow(()=>{
	//console.log('语法糖onShow');
	 loadPage({},false);
});
//页面隐藏时执行
onHide(()=>{
	//console.log('语法糖onHide');
});
/**
 * 加载接口数据
 * @param {Object} options  参数,对像数组
 * @param {Object} isPage   是否加载大于1页
 */
const loadPage=async (options,isPage)=>{
	let ret = await uni.$get('/appapi-group-groupdetails',{tencent_group_id:tencent_group_id.value});
	if(ret.error_code != 0){
		uni.$utils.showToast(ret.info,0,()=>{
			uni.navigateBack({data:1});
		});
		return;
	}
	if(ret.data.owner_id == uni.$vuex.state.globalData.user.user_id) isoWner.value=true;
	//console.log(ret.data);
	show_main.value=true;
	not_load.value=true;
	result.value=ret.data;
};
/**
 * 模板属性跳转页面
 * @param {Object} e
 */
function goPage(event){
	uni.$utils.dataSetPage(event);
};
//上传群图片
const upload=async()=>{
	if(!isoWner.value) return;
	uni.chooseImage({
	    count: 1, // 最多选择 1 张图片
	    sourceType: ['album', 'camera'], // 图片来源为相册和相机
	    success: async (res) => {
	        //console.log('选择的图片路径：', res.tempFilePaths);
			let ret = await uni.$uploadFile('/appapi-upload-image',res.tempFilePaths[0],{width:160,height:160});
			let imgUrl=ret.data.url;
			if(!imgUrl) uni.$utils.showToast('群封面图上传失败');
			await submit('face_url',imgUrl,(data)=>{
				result.value.face_url=imgUrl;
			});
	    },
	    fail: function (err) {
	        //console.error('选择图片失败：', err);
	    }
	});
};
//发送修改
const submit=async(field,value,callBack)=>{
	let param={};
	param[field]=value;
	param.id=result.value.id;
	//console.log(param);return;
	not_load.value=false;
	let ret=await uni.$post('/appapi-group-groupupdate',{},param);
	not_load.value=true;
	//console.log(ret);
	if(ret.error_code != 0){
		uni.$utils.showToast(ret.info);
		return;
	}
	callBack(ret.data);
};
</script>

<style  lang="scss">
	page {
		
	}
.fnow{color:#2979ff;}
.my_button{
	color:#fff;
	font-weight: normal;
	font-size: 32rpx;
	border:none;
	background: blue;
	background: #2979ff;
}
</style>
